<template>
  <div :class="$style.wrap">
    <Button type="text" @click="visible=true">查看详情</Button>
    <el-dialog :visible.sync="visible" title="邮件详情" width="70%" :close-on-click-modal="false" @open="getByIdEmailRecord">
      <div :class="$style.content">
        <!-- <div class="button-container" style="padding: 0 0 5px 0">
          <Button type="primary" @click="fullScreen">全屏查看</Button>
        </div> -->
        <table :class="$style.table">
          <tbody>
            <tr>
              <td>发件箱</td>
              <td>{{ detail.sysEmailAddress }}</td>
            </tr>
            <tr>
              <td>收件箱</td>
              <td>{{ (detail.tos||[]).map(e=>e.emailAddress).join(',') }}</td>
            </tr>
            <tr>
              <td>抄送</td>
              <td>{{ (detail.ccs||[]).map(e=>e.emailAddress).join(',') }}</td>
            </tr>
            <tr>
              <td>主题</td>
              <td>{{ detail.theme }}</td>
            </tr>
            <tr>
              <td>邮件内容</td>
              <td>
                <div ref="emailContent" :class="$style.emailContent">
                  <i :class="[$style.full, 'el-icon-full-screen']" title="全屏查看" @click="fullScreeHandle"></i>
                  <ElScrollbar>
                    <!-- <iframe :srcdoc="contentHtml" frameborder="0"></iframe> -->
                    <div ref="contentHtml" style="max-height:50vh;padding:10px 0" v-html="contentHtml"></div>
                  </ElScrollbar>
                </div>
              </td>
            </tr>
            <tr>
              <td>发送时间</td>
              <td>{{ detail.sendDate }}</td>
            </tr>
            <tr>
              <td>附件</td>
              <td>
                <div :class="$style.annex">
                  <a v-for="(a,i) in emailAnnexList" :key="i" href="javascript:void(0)" @click="e=>{aClickHandle(e, a)}">{{ a.fileName }}</a>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </el-dialog>
    <PreviewImage v-model="previewShow" :image-list="imageList"></PreviewImage>
  </div>
</template>
<script>
import { getByIdEmailRecord } from '@/api/email'
import PreviewImage from '@/components/PreviewImage'
import { downFileByA } from '@/utils'
export default {
  name: 'EmailDetail',
  components: {
    PreviewImage
  },
  props: {
    id: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      visible: false,
      contentHtml: '',
      detail: {},
      previewShow: false,
      imageList: []
    }
  },
  computed: {
    emailAnnexList() {
      return (this.detail.emailAnnexList || []).filter(e => {
        return e.isInline !== 1 && e.isInline !== '1'
      })
    }
  },
  methods: {
    fullScreeHandle() {
      if (!this.checkFull()) {
        this.exitFullScree()
      } else {
        this.fullScreen()
      }
    },
    checkFull() {
      return !document.fullscreenElement && !document.mozFullScreenElement && !document.webkitFullscreenElement
    },
    // 全屏查看
    fullScreen() {
      const element = this.$refs.emailContent
      if (element.requestFullscreen) {
        element.requestFullscreen()
      } else if (element.mozRequestFullScreen) {
        element.mozRequestFullScreen()
      } else if (element.webkitRequestFullscreen) {
        element.webkitRequestFullscreen()
      } else if (element.msRequestFullscreen) {
        element.msRequestFullscreen()
      }
      const contentHtml = this.$refs.contentHtml
      contentHtml.style.maxHeight = 'none'
    },
    exitFullScree() {
      if (document.exitFullscreen) {
        document.exitFullscreen()
      } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen()
      } else if (document.webkitExitFullscreen) {
        document.webkitExitFullscreen()
      }
      const contentHtml = this.$refs.contentHtml
      contentHtml.style.maxHeight = '50vh'
    },
    getByIdEmailRecord() {
      getByIdEmailRecord(this.id).then(res => {
        this.contentHtml = res.data.contentHtml
        this.detail = res.data
      })
    },
    // 附件预览
    aClickHandle(e, file) {
      e.preventDefault()
      if (!/(png$)|(jpg$)|(gif$)|(jpeg$)|(bmp$)/.test(file.filePath)) {
        let fileName = file.fileName
        if (!file.fileName.includes('.')) {
          fileName = `${fileName}.${file.fileType}`
        }
        downFileByA('/img/' + file.filePath, fileName)
        return
      }
      const t = this.emailAnnexList
      this.imageList = t.map(e => {
        return {
          url: e.filePath,
          name: e.fileName
        }
      }).filter(e => {
        return /(png$)|(jpg$)|(gif$)|(jpeg$)|(bmp$)/.test(e.url)
      })
      this.previewShow = true
    }
  }
}
</script>
<style lang='scss' module>
.wrap{
    display: inline-block;
    text-align: left;
    [class*="el-button"]{
        padding: 0 !important;
        margin-right: 15px;
    }
    .annex{
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .content{
      overflow: hidden;
      width: 100% !important;
    }
    .emailContent{
      width: 100%;
      position: relative;
      background-color: white;
      padding: 15px;
      text-align: left;
      &>iframe{
        width: 100%;
        height: 100%;
        min-height: 300px;
      }
      .full{
        position: absolute;
        right: 10px;
        top: 10px;
        font-size: 20px;
        font-weight: 700;
        cursor: pointer;
        z-index: 9999;
      }
    }
    .table{
      width: 100%;
      border-left: 1px solid #EBEEF5;
      border-right: 1px solid #EBEEF5;
      border-top: 1px solid #EBEEF5;
      word-wrap: break-word;
      word-break: break-all;
      table-layout:fixed;
      tbody{
        width: 100%;
      }
      tr{
        width: 100%;
        td:first-child{
          width: 80px !important;
          border-right: 1px solid #EBEEF5;
        }
        td{
          width: 100%;
          text-align: center;
        }
        &:hover{
          background-color: white !important;
        }
      }
    }
}
</style>
